<template>
    <div>
        <div class="head">
            <router-link to="/">
                <div class="go-back iconfont">&#xe624;</div>
            </router-link>
            选择城市
        </div>
        <div class="serch-box">
            <div class="serch-input">
                <div class="iconfont">&#xe632;</div>
                <input type="text" v-model="keyword" class="serch-text" placeholder="合肥/hefei/hf" />
            </div>
        </div>
        <div class="search-content" ref="search" v-show="keyword">
            <ul>
                <li 
                    class="search-item" 
                    v-for="item of list" 
                    :key="item.id"
                    @click="cityChange(item.name)"
                    >{{item.name}}</li>
                <li class="search-item" v-show="hasNoData">没找匹配到城市</li>
            </ul>
        </div>
    </div>
</template>
<script>
import Bscroll from 'better-scroll'
export default {
    name:'CityHead',
    props:{
        cities:Object
    },
    data(){
        return{
            keyword:'',
            list:[],
            timer:null
        }
    },
     methods:{
        cityChange(city){
            this.$store.commit('changeCity',city)
            this.$router.push('/')
        }
    },
    computed:{
        hasNoData(){
            return !this.list.length
        }
    },
    watch:{
        keyword(){
            if(this.timer){
                clearTimeout(this.timer)
            }
            if(!this.keyword){
              this.list=[]
              return  
            }
            this.timer = setTimeout(()=>{
                const result = []
                for(let i in this.cities){
                    this.cities[i].forEach((value) => {
                        if(value.spell.indexOf(this.keyword)>-1 || value.name.indexOf(this.keyword)>-1){
                            result.push(value)
                        }
                    });
                }
                this.list = result
            },100)
        }
    },
    mounted(){
        this.scroll = new Bscroll(this.$refs.search)
    }
}
</script>
<style lang="stylus" scoped>
    .head
        width:100%
        height :0.8rem
        background :#EDF0F5
        border-bottom:.02rem solid #d4d4d4
        text-align :center
        line-height :0.8rem
        font-size:.33rem
        .go-back
            width :.2rem
            height 0.3rem
            float:left
            color:#2dbb55
            font-size:.40rem
            padding-left:.25rem
    .serch-box
        width:100%
        height :0.8rem
        position :relative
        background :#EDF0F5
        .serch-input
            width:90%
            height :0.5rem
            line-height :0.5rem
            background:#fff
            position :absolute
            top:.11rem
            left:.38rem
            border:.02rem solid #d4d4d4
            border-radius:.06rem
            display :flex
            .iconfont
                float:left
                font-size:.35rem
                margin-left:.2rem
                color:#d4d4d4
            .serch-text
                width:80%
                flex:1
                color:#d4d4d4
                height :100%
                font-size:.3rem
                margin-left:.2rem
    .search-content
        overflow :hidden
        position :absolute
        top:1.6rem
        left:0
        right :0
        bottom :0
        z-index :1
        background :#fff
        .search-item
            line-height :.76rem
            border-bottom:.005rem solid #eee 
            padding-left:.45rem
</style>
